<template>
  <div class="delivery-index-page">
    <top class="top" :key="status+'-top'"></top>
    <middle class="middle" :key="status+'-middle'" @review="review"></middle>
  </div>
</template>

<script>
import Top from './layout/index/Top';
import Middle from './layout/index/Middle';

export default {
  name: "DeliveryIndexPage",
  props: {

  },
  data() {
    return {
      status: 'normal'
    };
  },
  computed: {

  },
  mounted() {

  },
  watch: {

  },
  methods: {
    review(deliveryId) {
      this.status = `review-${deliveryId}`;
    }
  },
  components: {
    Top,
    Middle
  },
};
</script>

<style scoped lang="scss">
.delivery-index-page {
  >.top {
    margin-top: 2rem;
  }
  >.middle {
    margin: 40px;
  }
}
</style>
